<template>
  <div class="main_box" style="padding:10px">
    <div class="add_wrap">
      <div class="tit">
        <h2>{{ dataForm.id ? "编辑租户" : "新增租户" }}</h2>
        <el-button
          type="success"
          plain
          size="small"
          icon="fa fa-mail-forward"
          @click="returnList"
          >返回</el-button
        >
      </div>
      <el-form
        :model="dataForm"
        ref="dataForm"
        label-width="200px"
        :rules="roleRules"
      >
        <el-row>
          <el-form-item prop="name" label="租户名称">
            <el-input
              type="text"
              v-model="dataForm.name"
              clearable
              placeholder="请输入租户名称"
            ></el-input>
          </el-form-item>
          <el-form-item prop="code" label="租户编号">
            <el-input
              :disabled="dataForm.id ? true : false"
              type="text"
              v-model="dataForm.code"
              placeholder="请输入租户编号"
            ></el-input>
            <div
              :style="{ color: 'red', display: dataForm.id ? 'none' : 'block' }"
            >
              租户编号新增后不能修改
            </div>
          </el-form-item>
          <el-form-item prop="domainName" label="绑定域名">
            <el-input
              type="text"
              v-model="dataForm.domainName"
              placeholder="请输入绑定域名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="date" label="租用日期">
            <el-date-picker
              v-model="dataForm.date"
              type="datetimerange"
              range-separator="至"
              value-format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item prop="remark" label="备注">
            <el-input type="textarea" v-model="dataForm.remark"></el-input>
          </el-form-item>
        </el-row>
        <div class="tit" v-if="!dataForm.id">
          <h2>创建租户管理员</h2>
        </div>
        <el-row v-if="!dataForm.id">
          <el-form-item label="登录账号" prop="userName">
            <span>admin</span>
          </el-form-item>
          <el-form-item label="角色名" prop="userName">
            <span>租户管理员</span>
          </el-form-item>
          <el-form-item label="管理员昵称" prop="nickName">
            <el-input v-model="dataForm.nickName"></el-input>
          </el-form-item>
          <el-form-item label="真实姓名" prop="fullName">
            <el-input
              v-model="dataForm.fullName"
              :clearable="true"
            ></el-input> </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input type="number" v-model="dataForm.phone"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item>
            <el-button plain type="primary" @click="sureClick">保 存</el-button>
            <el-button plain @click="returnList">取 消</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import * as message from "@/constants/message";
import TenantApi from "@/api/system/tenant";
import AuthApi from "@/api/system/auth";
import DepartApi from "@/api/system/depart";
export default {
  data() {
    return {
      dataForm: {
        // id:"",
        code: "",
        date: null,
        domainName: "",
        name: "",
        remark: "",
        userName: "admin",
        nickName: "",
        phone: "",
        fullName: "",
      },
      departList:[],
      roleRules: {
        code: [
          { min: 18, max: 36, message: "长度在必须18个字符", trigger: "blur" }
        ],
        name: [{ required: true, message: "请输入租户名称", trigger: "blur" }],
        domainName: [{ required: true, message: "请输入域名", trigger: "blur" }],
        nickName: [
          {required: true, message: "请输入用户昵称", trigger: "blur"}
        ],
        fullName: [
          {required: true, message: "请输入真实姓名", trigger: "blur"}
        ],
        phone: [
          {required: true, message: "请输入手机号", trigger: "blur"}
        ],
      }
    };
  },
  components: {},
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      if (this.$route.query.id) {
        this.dataForm.id = this.$route.query.id;
        delete this.roleRules.nickName
        delete this.roleRules.fullName
        delete this.roleRules.phone
        this.$nextTick(()=>{
          this.$refs.dataForm.clearValidate()
        })
        this.getData();
      } else {
        this.getDepartList()
      }
    },
    keydown(e) {
      if (e.keyCode == 32) {
        e.returnValue = false;
      }
    },
    async getData() {
      const res = await TenantApi.getTenant({ id: this.dataForm.id });
      this.$Utils.bindingBean(this.dataForm, res.data);
      if (res.data.tenantStartTime) {
        this.dataForm.date = [res.data.tenantStartTime, res.data.tenantEndTime];
      }
    },
    // 获取部门
    async getDepartList() {
      const {data} = await DepartApi.listDeparts()
      this.departList = data || []
    },
    sureClick() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.$confirm(
            message.MSG_CONFIRM_SAVE_ALTER,
            message.TITLE_PROMPT,
            {}
          ).then(() => {
            if (this.dataForm.id) {
              this.editData();
            } else {
              this.addData();
            }
          });
        }
      });
    },
    // 写一个
    addData() {
      let param = {
        code: this.dataForm.code,
        name: this.dataForm.name,
        domainName: this.dataForm.domainName,
        tenantStartTime: this.dataForm.date ? this.dataForm.date[0] : "",
        tenantEndTime: this.dataForm.date ? this.dataForm.date[1] : "",
        userName: this.dataForm.userName,
        nickName: this.dataForm.nickName,
        phone: this.dataForm.phone,
        fullName: this.dataForm.fullName,
        remark: this.dataForm.remark
      };
      TenantApi.addTenant(param).then(res => {
        this.$Utils.notifySuccess();
        this.returnList();
      });
    },
    editData() {
      let param = {
        id: this.dataForm.id,
        code: this.dataForm.code,
        name: this.dataForm.name,
        domainName: this.dataForm.domainName,
        tenantStartTime: this.dataForm.date ? this.dataForm.date[0] : "",
        tenantEndTime: this.dataForm.date ? this.dataForm.date[1] : "",
        remark: this.dataForm.remark
      };
      TenantApi.editTenant(param).then(data => {
        this.$Utils.notifySuccess();
        this.returnList();
      });
    },
    returnList() {
      this.$store.dispatch("delView", this.$route);
      this.$router.push({ path: "/sys/tenantManagement" });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>

<style lang="scss" scoped>
.upload-img {
  &::v-deep .el-upload-dragger {
    display: flex;
    justify-content: space-around;
    align-items: center;

    .tip {
      padding-bottom: 30px;
    }
  }
}
</style>
